<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HELLOM</title>
  <link rel="stylesheet" href="css/editormd.css">
  <link rel="stylesheet" href="bootstrap-5.1.3/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/common.css">  
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
  <script src="bootstrap-5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery-3.6.0.js"></script>
  <script src="js/editormd.js"></script>
</head>
<body>

<!--导航条-->
<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="/">HELLOM</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          {{each nav}}
          {{if $index==0}}
          <li class="nav-item">
            <a class="nav-link active" href="{{$value.path}}">{{$value.title}}</a>
          </li>
          {{else}}
          <li class="nav-item">
            <a class="nav-link" href="{{$value.path}}">{{$value.title}}</a>
          </li>
          {{/if}}
          {{/each}}
          <li>
            <!-- 搜索 autocomplete="off" 表单记忆功能-->
              <input class="form-control me-2" type="search" placeholder="请搜索您感兴趣的内容" autocomplete="off" id="search">
          </li>
        </ul>
        <div class="d-flex align-items-center">
          {{ if isUser}}
            <button 
            type="button" 
            id="btnLogin" 
            class="btn btn-outline-primary me-1" 
            data-bs-toggle="modal" 
            data-bs-target="#login">登录</button>
            <button 
            type="button" 
            class="btn btn-primary border-1" 
            data-bs-toggle="modal" 
            data-bs-target="#register">注册</button>
          {{ else }}
            <a href="/user">
              <img src={{ avatar||'img/user.png' }} 
              width="32" 
              height="32" 
              style="border-radius:50%" 
              id="avatar"/>  
              欢迎您：{{ nickname }}
            </a>
            <button class="btn btn-outline-primary me-1 ms-3" id="tc">退出</button>

            <a class="btn btn-outline-primary me-1 ms-3" href="/article">文章发布</a>
          {{/if}}
        </div>
      </div>
    </div>
  </nav>
  <!--登陆-->
  <div class="modal fade" id="login" tabindex="-1" >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">登录</h5>
          <button type="button" id="dr_close" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="mb-3">
              <label for="loginName" class="form-label">帐号</label>
              <input type="text" class="form-control" id="loginName" placeholder="帐号" name="username">
            </div>
            <div class="mb-3">
              <label for="loginPwd" class="form-label">密码</label>
              <input type="text" class="form-control" id="loginPwd" placeholder="密码" name="password">
            </div>
            <div class="mb-3">
              <input type="submit" class="form-control btn-primary" id="dr" value="登入" >
            </div>
          </form>
        </div>
        <!--      <div class="modal-footer">-->
        <!--        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>-->
        <!--        <button type="button" class="btn btn-primary">Save changes</button>-->
        <!--      </div>-->
      </div>
    </div>
  </div>
  <!--注册-->
  <div class="modal fade" id="register" tabindex="-1" >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">注册</h5>
          <button type="button" id="zc_close" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" method="post">
            <div class="mb-3">
              <label for="username" class="form-label">帐号</label>
              <input type="text" class="form-control" id="username" placeholder="帐号" name="username">
            </div>
            <div class="mb-3">
              <label for="username" class="form-label">昵称</label>
              <input type="text" class="form-control" id="nickname" placeholder="昵称" name="nickname">
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">密码</label>
              <input type="text" class="form-control" id="password" placeholder="密码" name="password">
            </div>
            <div class="mb-3">
              <input type="submit" class="form-control btn-primary" id="zc" value="注册">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

<!--art-template 每个不一样的地方占位-->
{{block 'content'}} {{/block}}


<!--尾部-->
<footer>
  <!--友情链接-->
  <div class="container mt-5">
    <div class="row">
      <div class="col-6">
        <h2>友情链接</h2>
        <p>
          <a href="http://www.lynnk.cn/web">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
        <p>
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
      </div>
      <div class="col-6">
        <h2>友情链接</h2>
        <p>
          <a href="http://www.lynnk.cn/web">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
        <p>
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>,
          <a href="">hello run</a>
        </p>
      </div>
    </div>
  </div>
  <div class="mt-5">
    <p class="text-center"> Copyright ©2017-2022 web菜鸟 All Right Reserved.</p>
  </div>
</footer>


<script>
  // jQuery Ajax
  // $.get()  $.post()   $.ajax()前面两个的集合  $.load()加载/请求公共页面
  
  // 注册
  $("#zc").click(function (e){
    // 阻止表单的默认行为
    e.preventDefault();
    // 获取输入的input值
    var username = $("#username").val();
    var password = $("#password").val();
    var nickname = $("#nickname").val();
    //发送请求 $.post("请求地址",{参数数据},回调函数)

    // $.post("/register",{username,password},function (result){
    //   alert(result.msg)
    //   if (result.code===200){
    //     $("#zc_close").click()
    //     $("#btnLogin").click()
    //   }
    // })

    $.ajax({
      // 请求地址
      url:"/api/register",
      //请求类型
      type:"POST",
      //请求参数
      data:{ username,password,nickname },
      //请求成功
      success:function (result){   //  { code:200,msg:"注册成功" }
        if ( result.code === 200 ) {
          $("#register .modal-body").html(`<h3>恭喜您，${result.msg}</h3>`);
            // alert(result.msg);
        }else if( result.code === 500 ){
          $("#register .modal-body").html(`<h3>不好意思，${result.msg}</h3>`);
            // alert(result.msg);
        } 
        // console.log(result);
        // $("#zc_close").click();       
        // localStorage.setItem("username",result.data)
        location.href="/"
      },
      //请求失败
      error:function (error){
        alert("请求失败:",error);
      }
    })
  })

  // $("#navbar>form>a").css("display","none");

  // 登录
  $("#dr").click(function (e){
    // 阻止表单的默认行为
    e.preventDefault();
    // 获取表单的value
    var username=$("#loginName").val();
    var password=$("#loginPwd").val();
    // 发送登录请求
    $.ajax({
      // 请求地址
      url:"/api/login",
      //请求类型
      type:"POST",
      //请求参数
      data:{username,password},
      //请求成功
      success:function (result){
        if ( result.code === 200 ) {
            $('#login .modal-body').html(`<h3>恭喜您，${result.msg}</h3>`);
            // $("#navbar>form>button").css("display","none");
            // $("#navbar>form>a:first-of-type").html(`<img src="${ result.user.avatar || 'img/user.png' }" width="32" height="32" style="border-radius:50%" id="avatar"/>  欢迎您：${result.user.nickname}`);
            // $("#dr_close").click();
            // $("#navbar>form>a").css("display","block");
            // localStorage.setItem("user",JSON.stringify(result.user));
        }else if( result.code === 500 ){
            $('#login .modal-body').html(`<h3>不好意思，${result.msg}</h3>`);
            // alert(result.msg);
        }
        // $("#dr_close").click();
        // localStorage.setItem("user",JSON.stringify(result.user));
        location.href="/";
      },
      //请求失败
      error:function (result){
        alert("请求失败")
      }
    })
  })


  // 登录用户的状态
  // var user = JSON.parse(localStorage.getItem("user"));

  // console.log(user);

  // 头像,昵称 ajax请求
  // if (user) {
  //   $.ajax({
  //     // 请求地址
  //     url:"/api/avatar",
  //     //请求类型
  //     type:"POST",
  //     //请求参数
  //     data:{username:user.username},
  //     //请求成功
  //     success:function (result){
  //       // console.log(result);
  //       if ( result.code === 200 ) {
  //           // 更新头像和昵称
  //           $("#navbar>form>button").css("display","none");
  //           $("#navbar>form>a:first-of-type").html(`<img src="${ result.avatar || 'img/user.png' }" width="32" height="32" style="border-radius:50%" id="avatar"/>  欢迎您：${result.nickname}`);
  //       }
  //     },
  //     //请求失败
  //     error:function (result){
  //       alert("请求失败")
  //     }
  //   })    
  // }else{
  //   $("#navbar>form>a").css("display","none");
  // }

  // 头像和昵称渲染
  // if (user){
  //   $("#navbar>form>button").css("display","none");
  //   $("#navbar>form>a:first-of-type").html(`<img src="img/user.png" width="32" height="32" style="border-radius:50%" id="avatar"/>  欢迎您：${user.nickname}`);
  // }else {
  //   $("#navbar>form>a").css("display","none");
  // }

  // 点击退出（清除用户信息）
  $("#tc").click(function (){
    // localStorage.removeItem("user");
    // location.href="/"
    // 发送请求到后端，实现退出登录清除req.session;
    $.ajax({
      // 请求地址
      url:"/api/quit",
      //请求类型
      type:"POST",
      //请求参数
      // data:{username:user.username},
      //请求成功
      success:function ({code,msg}){
        // console.log(result);
        if (code === 200) {
          location.href="/";
        }
      },
      //请求失败
      error:function (result){
        alert("请求失败")
      }
    })

  })

  // 搜索
  $('#search').on('change',function(e){
    e.preventDefault();
    e.stopPropagation();
    //console.log($(this).val());
    location.href = "/search?s="+$(this).val();
  })



</script>
</body>
</html>


